[CSS 트릭] 텍스트 밑 줄을 커스텀 스타일의 언더라인 만드는 방법

안녕하세요 ~ 웹이즈프리입니다. 웹페이지를 만들 때 텍스트에 밑 줄을 추가하여 강조 등의 목적으로 사용할 수 있습니다. 이 때 css의 text-decoration을 사용할 경우 쉽고 간단한 밑 줄 추가가 가능하죠. 하지만! 기능적으로는 충족하지만 심미적으로 이쁜 스타일의 목적은 함께 달성하기 어렵습니다. 하지만 두 가지 목적을 모두 달성할 수 있는 방법을 아래에서 알아봅니다.

커스텀 밑 줄 만드는 방법, text underline

먼저 아래와 같은 텍스트가 존재합니다. 이제 웹이즈프리만 밑 줄을 추가하기 위해서 text--underline 이름의 클래스를 함께 추가하였습니다.

가장 간단한 방법의 커스텀 밑 줄을 만들어보겠습니다. 이 때 색은 노란색으로 높이값은 3px의 크기를 가지도록 만들 예정입니다. 코드를 작성하면 아래와 같이 완성됩니다.

위 코드에서 특별히 어려운 부분은 없습니다. 해당 엘리먼트에 가상 선택자를 사용하고 여기에 border를 사용하여 밑 줄과 동일한 효과를 주었습니다. 다만 z-index 값이 각각 다르게 사용된 것을 보실 수 있는데 이 것은 border의 z-index 값이 더 높게되면 텍스트가 일부 가려져 나타나지 않기 때문입니다.

이제 위 코드를 실행하면? 아래와 같이 나타나게 됩니다.


보시는 것처럼 일반적인 텍스트 밑 줄 효과보다 횔씬 이쁘고 두꺼운 언더라인, 밑 줄이 추가된 것을 보실 수 있습니다. 일반 텍스트 밑 줄 효과와는 차이가 크다 할 수 있습니다.

참고로 일반적인 underline 역시 스타일을 변경하면 제한적인 스타일 구현이 가능합니다. 다만 간단한 애니메이션 등을 만들 경우거나 아래와 같이 여러 줄을 구현하는데에는 커스텀하게 만든 언더라인이 강점이 있겠습니다.

텍스트 밑 줄 애니메이션 효과, hover

만약 특정 텍스트 위에 마우스를 올려야 만 밑 줄이 나타나는 애니메이션을 구현하려고 합니다. 이 경우 아래와 같이 코드를 작성하면 구현 가능합니다. html은 위와 동일하고 css만 조금 변경해보도록 하겠습니다.

코드가 완성되었습니다. 보시면 처음 예제와 달라진 부분을 확인할 수 있습니다. 즉 width값이 평소에는 0이었다가 마우스가 올라간 hover 상태에서는 100%가 되어 나타나게 되죠. 아래는 이를 직접 구현한 부분입니다. 마우스를 올려서 달라진 부분을 확인해보세요.

@ 마우스 Hover 효과가 추가된 텍스트

다음으로 여러 줄에 언더 라인을 추가하는 방법을 알아보겠습니다.

멀티 라인에서 밑 줄 사용하는 방법

위의 방법은 해당 엘리먼트가 단 한 줄인 경우에만 적용 가능하다는 단점이 있습니다. 하지만 만약 여러 줄인 경우에 텍스트 언더라인을 추가하려고 합니다. 이 경우에도 가능할까요? 약간의 트릭을 사용하면 이 것 역시 가능합니다. 이를 구현하는 방법은 바로 백그라운드 그라디언트 효과를 사용하는 방법입니다.


즉 배경효과를 y축으로 반복 적용하면 여러 줄의 밑 줄을 적용한 것과 동일한 결과를 가져올 수 있는 것입니다. 먼저 html는 다음과 같습니다.

다음으로 css 코드입니다.

위의 css 코드를 살펴보면 linear-gradient를 사용하여 그라데이션 효과를 추가하였습니다. 이 때 transparent는 위 영역의 크기로 60%로 설정합니다. 그렇게되면 아래는 40%의 노란색 영역이 바로 밑 줄 영역이 됩니다.

그럼 아래에서 어떻게 구현했는지 확인해봅니다. 각각 최대 길이 400px, 200px, 100px인 경우의 예제입니다.



위 코드의 실행 결과입니다. 보시는 것처럼 각각 400px, 200px, 100px인 경우의 여러 줄에 적용된 밑 줄 언더라인 효과를 보실 수 있습니다. 이와 같은 방법으로 한 줄이 아닌  여러 줄에 커스텀 언더라인 스타일 적용이 가능합니다.

여기까지 커스텀하게 만든 밑 줄 효과 방법에 대하여 알아보았습니다.